<template>
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
      <topNav :isActive="0"></topNav>
    <div class="carousel-box">
      <!--轮播-->
      <Carousel v-model="carouselValue" loop :radius-dot="true">
        <CarouselItem v-for="(item , index) in carouselItem" :key="index">
          <img :src="item.img" />
        </CarouselItem>
      </Carousel>
    </div>
    <div class="wid-1200">
      <div>
        <!--景区资讯-->
        <div class="title-box">
          <p>景区资讯</p>
          <!-- <router-link to="/advisory">+MORE</router-link> -->
          <router-link to="">+MORE</router-link>
        </div>
        <div class="advisory-box">
          <div class="advisory-details">
            <i>
              <img :src="advisoryInfo.imgSrc" alt />
            </i>
            <div>
              <p>{{advisoryInfo.title}}</p>
              <div>{{advisoryInfo.content}}</div>
              <button>Read More</button>
            </div>
          </div>
          <ul class="advisory-list">
            <li v-for="(item , index) in advisoryItem" :key="index" @click="advisoryClick(index)">
              <i>
                <img :src="item.imgSrc" alt />
              </i>
              <p class="only-1">{{item.title}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <!--景区微人物-->
        <div class="title-box">
          <p>景区微人物</p>
        </div>
        <!-- 轮播 -->
        <div class="carousel-box">
          <!--轮播-->
          <Carousel autoplay dots="outside" loop>
            <CarouselItem v-for="(listItem,index) in personList" :key="index">
              <div class="list-box">
                <div class="list-item" v-for="(listItem,i) in listItem.listItem" :key="i">
                  <div class="img-box">
                    <img :src="listItem.img" alt />
                  </div>
                  <p class="little-title only-1">{{listItem.title}}</p>
                  <p class="name">{{listItem.name}}</p>
                </div>
              </div>
            </CarouselItem>
          </Carousel>
        </div>
      </div>
      <!-- 交通路线及停车指南 -->
      <div>
        <div class="title-box">
          <p>交通路线及停车指南</p>
          <!-- <router-link to="/flowTraffic">+MORE</router-link> -->
          <router-link to="">+MORE</router-link>
        </div>
        <div class="traffic-box">
          <div class="tab-box">
            <a href="javascript:;" :class="{active:isActive==i}" v-for="(tab,i) in trafficList.tab" :key="i" @click="changeList(i)">{{tab}}</a>
          </div>
          <ul class="traffic-content" v-show="isActive==0">
            <li v-for="(item,index) in trafficList.traffic" :key="index" >
              <div class="img-box" v-show="item.src">
                <img :src="item.src"/>
              </div>
              <div class="content-box">
                <P class="little-title only-1">{{item.title}}</P>
                <div class="content multi-line">{{item.content}}</div>
                <p class="bottom">
                  <a href="javascript:;" class="more" v-show="item.video">了解更多</a>
                  <span>{{item.time}}</span>
                </p>
              </div>
            </li>
          </ul>
          <ul class="traffic-content" v-show="isActive==1">
            <li v-for="(item,index) in trafficList.line" :key="index" >
              <div class="img-box" v-show="item.src">
                 <img :src="item.src"/>
              </div>
              <div class="content-box">
                <P class="little-title only-1">{{item.title}}</P>
                <div class="content multi-line">{{item.content}}</div>
                <p class="bottom">
                  <a href="javascript:;" class="more" v-show="item.video">了解更多</a>
                  <span>{{item.time}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 景区视频展播 -->
      <div>
        <div class="title-box">
          <p>景区视频展播</p>
         <!-- <router-link to="/videoList">+MORE</router-link> -->
         <router-link to="">+MORE</router-link>
        </div>
        <div class="scenic-video">
          <div class="left-box">
            <video id="myVideo" src="//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4"></video>
          <!-- 遮罩 -->
          <div class="mask-box">
            <p class="video-title">视频1</p>
            <img src="@/assets/images/video-btn.png" alt="" class="video-btn"  @click="playPause">
          </div>
          </div>
          <div class="right-box">
            <button>推荐视频</button>
            <div class="right-video" v-for="(item,i) in videoList" :key="i">
              <div class="left-box">
                <video :src="item.video"></video>
                <p>{{item.name}}</p>
              </div>
              <div class="right-box">
                <p class="multi-line">{{item.title}}</p>
                <span>{{item.time}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 特色景点 公告信息 -->
      <div class="features-notice">
        <!-- 特色景点 -->
        <div class="features-box">
          <div class="title-box">
            <p>特色景点</p>
           <!-- <router-link to="/picture">+MORE</router-link> -->
           <router-link to="">+MORE</router-link>
          </div>
          <div class="top">
            <div class="img-box">
              <img src="../assets/temporary/features1.jpg" alt="">
            </div>
            <div class="img-box">
              <img src="../assets/temporary/features2.jpg" alt="">
            </div>
          </div>
          <div class="bottom">
            <div class="img-box">
              <img src="../assets/temporary/features3.jpg" alt="">
            </div>
              <div class="img-box">
              <img src="../assets/temporary/features4.jpg" alt="">
            </div>
              <div class="img-box">
              <img src="../assets/temporary/features5.jpg" alt="">
            </div>
          </div>
        </div>
        <!-- 公告信息 -->
        <div class="notice-box">
          <div class="title-box">
            <p>公告信息</p>
           <!-- <router-link to="/interactive">+MORE</router-link> -->
            <span>+MORE</span>
          </div>
          <ul>
            <li v-for="(item,i) in noticeList" :key="i">
              <div class="date-box"><p>{{item.date}}</p><span>{{item.year}}</span></div>
              <div class="text-box">
                <div class="title multi-line ">{{item.content}}</div>
                <i><img src="../assets/images/icon-browse.png" alt="">{{item.num}}</i>
              </div>
            </li>
          </ul>
        </div>
      </div>
  </div>
    <footNav></footNav>
    <goTop></goTop>
</div>
</template>

<script>
// @ is an alias to /src
// 自定义组件
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import topLogin from "@/components/topLogin/index";
import goTop from "@/components/goTop/index"
// 框架
import { Carousel, CarouselItem } from "view-design";
//临时图片
import carouselImg from "../assets/temporary/carousel.jpg";
import advisoryImg from "../assets/temporary/advisoryImg.jpg";
import advisoryImg1 from "../assets/temporary/advisoryImg1.jpg";
import advisoryImg2 from "../assets/temporary/advisoryImg2.jpg";
import advisoryImg3 from "../assets/temporary/advisoryImg3.jpg";
import person1 from "../assets/temporary/person1.jpg";
import person2 from "../assets/temporary/person2.jpg";
import person3 from "../assets/temporary/person3.jpg";
import person4 from "../assets/temporary/person4.jpg";
import person5 from "../assets/temporary/person5.jpg";
import person6 from "../assets/temporary/person6.jpg";
import person7 from "../assets/temporary/person7.jpg";
import person8 from "../assets/temporary/person8.jpg";
import traffic from "../assets/temporary/traffic.jpg";
import line from "../assets/temporary/line.jpg";

export default {
  components: {
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem,
    topNav,
    footNav,
    topLogin,
    goTop
  },
  name: "Home",
  data() {
    return {
      carouselItem: [{ img: carouselImg }, { img: carouselImg },{ img: carouselImg }], //轮播图
      carouselValue: 0, //轮播图索引
			advisoryInfo: "",
      isActive:0,//tab栏是否选中
      advisoryItem: [
        {
          imgSrc: advisoryImg1,
          title: "每天8万立方米温榆河水 北京城市副中心森林湿地“活”起来",
          content:
            "北京地势西高东低，位于东部的通州区每年汛期都面临着较大的排洪压力。为保障副中心城市安全，一个名叫“通州堰”的综合水利项目正在实施。“通州堰”是借鉴“堰”的分水原理，运用现代工程技术手段，通过分流、蓄滞、排除等措施，围绕副中心构建“上蓄、中疏、下排”的多级滞洪缓冲防洪体系，最终使副中心防洪标准从现在的50年一遇提高到百年一遇。\n" +
            "　　目前正在加紧施工的宋庄蓄滞洪区二期，属于“通州堰”的“上蓄”部分，建设内容包括尹各庄分洪闸、尹各庄拦河闸，窑平路围堤加高，富壁路涵洞联通，以及蓄滞洪区湿地的绿化美化工程。\n" +
            "　　“工期很紧张，我们克服了各种困难，在2月底前实现了各标段全部复工。”项目负责人、北京市水务工程建设与管理事务中心副总工郭靖波介绍。"
        },
        {
          imgSrc: advisoryImg2,
          title: "每天18万立方米温榆河水 北京城市副中心森林湿地“活”起来",
          content:
            "北京地势西高东低，位于东部的通州区每年汛期都面临着较大的排洪压力。为保障副中心城市安全，一个名叫“通州堰”的综合水利项目正在实施。“通州堰”是借鉴“堰”的分水原理，运用现代工程技术手段，通过分流、蓄滞、排除等措施，围绕副中心构建“上蓄、中疏、下排”的多级滞洪缓冲防洪体系，最终使副中心防洪标准从现在的50年一遇提高到百年一遇。\n" +
            "　　目前正在加紧施工的宋庄蓄滞洪区二期，属于“通州堰”的“上蓄”部分，建设内容包括尹各庄分洪闸、尹各庄拦河闸，窑平路围堤加高，富壁路涵洞联通，以及蓄滞洪区湿地的绿化美化工程。\n" +
            "　　“工期很紧张，我们克服了各种困难，在2月底前实现了各标段全部复工。”项目负责人、北京市水务工程建设与管理事务中心副总工郭靖波介绍。"
        },
        {
          imgSrc: advisoryImg3,
          title: "每天28万立方米温榆河水 北京城市副中心森林湿地“活”起来",
          content:
            "北京地势西高东低，位于东部的通州区每年汛期都面临着较大的排洪压力。为保障副中心城市安全，一个名叫“通州堰”的综合水利项目正在实施。“通州堰”是借鉴“堰”的分水原理，运用现代工程技术手段，通过分流、蓄滞、排除等措施，围绕副中心构建“上蓄、中疏、下排”的多级滞洪缓冲防洪体系，最终使副中心防洪标准从现在的50年一遇提高到百年一遇。\n" +
            "　　目前正在加紧施工的宋庄蓄滞洪区二期，属于“通州堰”的“上蓄”部分，建设内容包括尹各庄分洪闸、尹各庄拦河闸，窑平路围堤加高，富壁路涵洞联通，以及蓄滞洪区湿地的绿化美化工程。\n" +
            "　　“工期很紧张，我们克服了各种困难，在2月底前实现了各标段全部复工。”项目负责人、北京市水务工程建设与管理事务中心副总工郭靖波介绍。"
        }
      ],
      personList: [
        {
          listItem: [
            { img: person1, title: "景区管理人", name: "李斯" },
            { img: person2, title: "景区管理人", name: "张三" },
            { img: person3, title: "景区管理人", name: "李萧萧" },
            { img: person4, title: "景区管理人", name: "王二小" }
          ]
        },
        {
          listItem: [
            { img: person5, title: "景区管理人", name: "赵亮" },
            { img: person6, title: "景区管理人", name: "高锋" },
            { img: person7, title: "景区管理人", name: "王君君" },
            { img: person8, title: "景区管理人", name: "李文" }
          ]
        },
        {
          listItem: [
            { img: person1, title: "景区管理人", name: "张三" },
            { img: person5, title: "景区管理人", name: "王二小" },
            { img: person8, title: "景区管理人", name: "李萧萧" },
            { img: person2, title: "景区管理人", name: "高锋" }
          ]
        },
        {
          listItem: [
            { img: person6, title: "景区管理人", name: "李斯" },
            { img: person7, title: "景区管理人", name: "王二小" },
            { img: person3, title: "景区管理人", name: "李萧萧" },
            { img: person5, title: "景区管理人", name: "王君君" }
          ]
        }
      ],
      trafficList: {tab: ["交通信息", "游线推荐"],
        traffic: [
            {
              src:traffic,
              title: "关于市郊铁路S2运行信息的温馨提示",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
            },
            {
              title: "关于市郊铁路S2运行信息的温馨提示",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
            },
            {
              title: "关于市郊铁路S2运行信息的温馨提示",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
            }
					],
				line:[
					{
              src:line,
              title: "游线推荐",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
						},
						{
              title: "关于市郊铁路S2运行信息的温馨提示",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
						},
						{
              title: "关于市郊铁路S2运行信息的温馨提示",
              content:
                "中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,中秋小长假游客出行返程较为集中,",
              time: "2020-04-07"
						}
					]
      },
      videoList:[
        {video:'//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4',name:'视频1',title:'国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席',time:'2020-04-08'},
        {video:'//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4',name:'视频2',title:'国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席',time:'2020-04-08'},
        {video:'//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4',name:'视频3',title:'国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席国务院总理李克强将于10月9日晚出席',time:'2020-04-08'}
      ],
      // 公告信息
      noticeList:[
        {date:'04-08',year:'2020',content:'注意游览安全。在园内行走时，小心井盖、台阶，以防不慎跌伤。保管好自己物品，以防丢失。儿童、行动不便的老人需在家人陪同下游园。',num:124},
        {date:'04-08',year:'2020',content:'注意游览安全。在园内行走时，小心井盖、台阶，以防不慎跌伤。保管好自己物品，以防丢失。儿童、行动不便的老人需在家人陪同下游园。',num:124},
        {date:'04-08',year:'2020',content:'注意游览安全。在园内行走时，小心井盖、台阶，以防不慎跌伤。保管好自己物品，以防丢失。儿童、行动不便的老人需在家人陪同下游园。',num:124},
        {date:'04-08',year:'2020',content:'注意游览安全。在园内行走时，小心井盖、台阶，以防不慎跌伤。保管好自己物品，以防丢失。儿童、行动不便的老人需在家人陪同下游园。',num:124},
      ]
		}		
    
  },
  mounted() {
    this.advisoryInfo = this.advisoryItem[0];
  },
  methods: {
    advisoryClick(index) {
      this.advisoryInfo = this.advisoryItem[index];
		},
		changeList(i){
			this.isActive=i
    },
    playPause(){
      let myVideo=document.getElementById('myVideo')
     if(myVideo.paused){
        myVideo.play()
     }else{
        myVideo.pause()
     }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/basis";
.carousel-box {
  img {
    width: 100%;
  }
}
.demo-carousel {
  width: 100%;
  height: 400px;
  background-color: #200;
}
.advisory-box {
  position: relative;
  .advisory-details {
    background-color: #fff;
    padding: 10px;
    display: flex;
    i {
      width: 582px;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 40px;
      div {
        flex: 1;
        margin: 24px auto;
        color: #666;
        line-height: 1.5;
        font-size: 14px;
      }
      p {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      button {
        background-color: $colorSky;
        width: 150px;
        height: 48px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  .advisory-list {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 164px;
    padding: 8px;
    background-color: #151c2c;
    li {
      cursor: pointer;
      p {
        height: 29px;
        line-height: 29px;
        color:#fff;
      }
    }
  }
}
/* 景区微人物 */
.list-box {
  display: flex;
  .list-item {
    margin-right: 25px;
    &:last-child {
      margin-right: 0;
    }
    .img-box {
      width: 280px;
      height: 280px;
      border: 1px solid #ccc;
    }
    p {
      text-align: center;
    }
    .name {
      font-size: 12px;
      color: $colorSky;
    }
  }
}
/* 交通路线 */
.traffic-box {
  display: flex;
  /* 左侧tab */
  .tab-box {
    background-color: #ccc;
    text-align: center;
    > a {
			display: block;
			width: 150px;
      height: 200px;
      line-height: 200px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
     
      &.active {
        background-color: $colorBlue;
        color: #fff;
      }
    }
  }
  /* 右侧内容 */
  .traffic-content {
    margin-left: 20px;
    li {
      height:120px;
      display: flex;
      justify-content: space-between;
      &:nth-of-type(1){
        height:160px;
      }
      .img-box {
        margin-right:10px;
        width:200px;
        height:160px;
        >img{
          height:100%;
        }
			}
      // 内容
			.content-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0;
				.content{
					font-size: 14px;
					line-height: 1.5;
					color:#666;
				}
				.bottom{
					display: flex;
					justify-content: flex-end;
          .more{
            font-size: 12px;
            color: #fff;
            padding: 3px 10px;
            border-radius: 10px;
            background-color: $colorGreen;
          }
          .time{
            font-size: 12px;
            color:#666;
          }
				}
				
			}
      &:nth-of-type(1){
      .content{
        -webkit-line-clamp:3;
      }
      .bottom{
        justify-content:space-between;
      }
    }
    }
  }
}
/* 景区视频展播 */
.scenic-video{
  display: flex;
  video{
    width: 100%;
  }
  .left-box{
    position: relative;
    width: 776px;
    margin-right: 20px;
    &:hover{
      .mask-box{
        display: block;
      }
    }
    // 遮罩
    .mask-box{
      display: none;
      position: absolute;
      top:0;
      left: 0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,.3);
      .video-title{
        position: absolute;
        left:0;
        bottom: 0;
        width: 100%;
        height:46px;
        line-height: 46px;
        text-align: center;
        background-color: rgba(0,0,0,.6);
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
      .video-btn{
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:50px;
        cursor:pointer;
      }
    }
  }
  // 右侧
  .right-box{
    flex:1;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    button{
      width: 80px;
      height: 36px;
      background-color: $colorBlue;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
    .right-video{
      display: flex;
      justify-content: space-between;
      .left-box{
        position: relative;
        width:200px;
        margin-right: 10px;
        >p{
          position: absolute;
          left:0;
          bottom:0;
          width:100%;
          height:36px;
          line-height: 36px;
          text-align: center;
          color:#fff;
          background-color: rgba(0,0,0,.6);
        }
      }
      .right-box{
        flex:1;
         display: flex;
         flex-direction:column;
         justify-content:space-between;
         font-size: 14px;
         color: #333;
         >span{
           font-size: 12px;
         }
       }
    }
  }
}
/* 特色景点和公告信息 */
.features-notice{
  margin:50px 0;
  display: flex;
  justify-content: space-between;
  img{
    display: block;
    width:100%;
  }
  .title-box{
    padding:0;
    margin-bottom:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      position:static;
    }
  }
  /* 特色景点 */
  .features-box{
    width: 776px;
    margin-right:20px;
    .top{
      height: 320px;
      display: flex;
      margin-bottom:10px;
      .img-box{
        overflow: hidden;
        &:nth-of-type(1){
          width:514px;
          margin-right:10px;
        }
        &:nth-of-type(2){
          width:252px;
          overflow: hidden;
        }
        >img{
          transition: all 1s;
        }
        &:hover >img{
          transform: scale(1.3);
        }
      }
      
    }
    .bottom{
      display: flex;
      .img-box{
        width:252px;
        height:252px;
        overflow: hidden;
        margin-right:10px;
        img{
          width: 100%;
          height:100%;
        }
        &:last-child{
          margin-right: 0;
        }
         >img{
          transition: all 1s;
        }
        &:hover >img{
          transform: scale(1.3);
        }
      }
    }
  }
  .notice-box{
    flex:1;
    display: flex;
    flex-direction: column;
    ul{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      li{
        display: flex;
        &:hover{
          .date-box{
            background-color: $colorBlue;
          }
        }
      }
    }
    .date-box{
      width: 100px;
      height:100px;
      padding:15px 0;
      margin-right:10px;
      background-color:$colorEarth;
      border-radius: 4px;
      color: #fff;
      text-align: center;
      p{
        font-size: 28px;
      }
      span{
        font-size: 20px;
      }
      
    }
    .text-box{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      i{
        font-size: 12px;
        color:#999;
      }
      img{
        display: inline-block;
        width: 20px;
        margin-right:5px;
      }
    }
  }
}
</style>
